<template>
  <div class="home">
    <div class="bg"></div>
    <div class="box">
      <div class="logo-h1">
        <!-- <img
          src="../assets/logo-1ef800a8.svg"
          class="logo"
          alt="logo"
          data-v-7b9d9b52=""
        /> -->
        <RedditOutlined
          style="font-size: 36px; margin-right: 15px; color: #00b0f0"
        />
        <h1>校园互助平台</h1>
      </div>
      <p>校园互助是校园内同学间的互相帮助平台</p>
      <a-space direction="vertical" style="width: 100%">
        <a-input placeholder="账户：admin" size="large" v-model:value="user">
          <template #prefix><UserOutlined /></template>
        </a-input>
        <a-input-password
          v-model:value="pwd"
          placeholder="密码：admin 或者 123456"
          size="large"
          style="margin-top: 10px"
        >
          <template #prefix><UnlockOutlined /></template>
        </a-input-password>
        <a-button
          type="primary"
          block
          style="margin-top: 10px"
          size="large"
          @click="handleLogin"
          :loading="loading"
          >登录</a-button
        >
      </a-space>
    </div>
  </div>
</template>
<script>
import {
  UserOutlined,
  UnlockOutlined,
  RedditOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
export default {
  name: "",
  components: {
    UserOutlined,
    UnlockOutlined,
    RedditOutlined,
  },
  mixins: [],
  props: {},
  data() {
    return {
      user: "",
      pwd: "",
      loading: false,
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    handleLogin() {
      this.loading = true;
      setTimeout(() => {
        if (
          this.user == "admin" &&
          (this.pwd == "123456" || this.pwd == "admin")
        ) {
          message.success("登录成功");
          this.loginSuccess();
        } else {
          message.warning("登录失败！账号密码错误");
        }
        this.loading = false;
      }, 1500);
    },
    loginSuccess() {
      this.gotoHome();
    },
    gotoHome() {
      this.$router.push({
        path: "/home",
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.home {
  .bg {
    position: absolute;
    width: 100%;
    min-height: 100%;
    padding: 110px 0 144px;
    background-image: url("../assets/background-d7103c44.svg");
    background-repeat: no-repeat;
    background-position: center 110px;
    background-size: 100%;
    z-index: 0;
  }
  .box {
    position: fixed;
    width: 370px;
    height: max-content;
    top: 150px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    .logo-h1 {
      display: flex;
      align-items: center;
      width: max-content;
      margin: 0 auto;
      .logo {
        height: 44px;
        margin-right: 16px;
        vertical-align: top;
        border-style: none;
      }
      h1 {
        margin-bottom: 0;
      }
    }
    p {
      text-align: center;
      margin-top: 12px;
      color: #000000a6;
      margin-bottom: 40px;
      font-size: 14px;
    }
  }
}
</style>